<template>
  <div class="base-collapse" style="margin-bottom: 10px">
    <el-collapse expand-icon-position="left" v-model="activeNames" @change="handleChange">
      <el-collapse-item v-if="hideIcon" icon="" :title="title" name="1">
        <template #title>
          <slot name="header">{{ title }}</slot>
        </template>
        <slot></slot>
      </el-collapse-item>
      <el-collapse-item v-else :title="title" name="1">
        <template #title>
          <slot name="header">{{ title }}</slot>
        </template>
        <slot></slot>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";

interface Props {
  title?: string;
  hideIcon?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  title: "标题",
  hideIcon: false
});
const emit = defineEmits(["update:modelValue", "cancel", "confirm", "open"]);
const handleChange = val => {
  console.log(val);
};
const activeNames = ref([]); //默认折叠
// const activeNames = ref(["1"]);// 默认展开
</script>
<style scoped>
:deep(.el-collapse-item__content) {
  padding-bottom: unset;
}
</style>
